<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>查联行号</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <div class="whole-flex-center-start whole-top-handle">
                <el-button size="small" @click="clearFilter" style="margin-right:20px">重置所有筛选</el-button>
                <el-col :span="4" class="margin-r-5">
                    <el-input v-model="bankName" size="small" placeholder="请输入银行名称"></el-input>
                </el-col>
                <el-col :span="4" class="margin-r-5">
                    <el-input v-model="branchesName" size="small" placeholder="请输入支行名称"></el-input>
                </el-col>
                <el-button size="small" @click="getBankNumberList(1)">查询</el-button>
            </div>
            <div class="whole-flow-table-box">
                <el-table ref="myTable" :data="bankNumberList" style="width:100%" stripe border>
                    <el-table-column align="center" type="selection" width="50"></el-table-column>
                    <el-table-column align="center" prop="bankCode" width="100" label="银行Code"></el-table-column>
                    <el-table-column align="center" prop="bankName" label="银行名称" width="180"></el-table-column>
                    <el-table-column align="center" prop="branchesName" label="支行名称"></el-table-column>
                    <el-table-column align="center" prop="bankNumber" label="联行号"></el-table-column>
                </el-table>
                <div class="whole-pagination">
                    <el-pagination :page-size="size" background layout="prev, pager, next" :total="count" @current-change="getBankNumberList"></el-pagination>
                </div>
            </div>
        </el-card>
    </div>
</template>
<script>
export default {
    data() {
        return {
            bankNumberList: [],
            count: 1,
            page: 1,
            size: 10,
            bankName: '',
            branchesName: '',
        }
    },
    created() {
        this.getBankNumberList(1);
    },
    methods: {
        clearFilter() {
            this.$refs.myTable.clearFilter();
            this.bankName = '';
            this.branchesName = '';
            this.getBankNumberList(1);
        },
        getBankNumberList(page,name,childName) {
            let _this = this;
            this.$axios({
                url: "/admin/conf/bankNumber",
                data: {
                    name: _this.bankName,
                    childName: _this.branchesName,
                    offset: page,
                    limit: _this.size,
                },
                success(res) {
                    if (res.data.code == 200) {
                        _this.bankNumberList = res.data.content.data;
                        _this.count = res.data.content.count;
                    }
                },
            });
        }
    }
}
</script>